<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解文件元数据</title>
</head>

<body>
  <div>
    <h1>Read File Metadata</h1>
    <input type="file" id="file-uploader">
    <p id="feedback"></p>
  </div>
</body>
<script>

  /* 
  每当我们上传一个文件时，File 对象都有元数据信息，如文件名、大小、最后更新时间、类型等，此信息对于进一步的验证和决策很有用。
  */

  /* 
  // 通过id获取文件上传者
  const fileUploader = document.getElementById('file-uploader');

  // 监听 change 事件并读取元数据
  fileUploader.addEventListener('change', (event) => {
    // 获取FileList数组
    const files = event.target.files;

    // 循环浏览文件并获取元数据
    for (const file of files) {
      const name = file.name;
      const type = file.type ? file.type : 'NA';
      const size = file.size;
      const lastModified = file.lastModified;
      console.log({ file, name, type, size, lastModified });
    }
  });
  */

  const fileUploader = document.getElementById('file-uploader');

  fileUploader.addEventListener('change', (event) => {
    const files = event.target.files;
    console.log('files', files);

    for (const file of files) {
      const name = file.name;
      const type = file.type ? file.type : 'NA';
      const size = file.size;
      const lastModified = file.lastModified;
      console.log({ file, name, type, size, lastModified });

      const feedback = document.getElementById('feedback');
      const msg = ` File Name: ${name} <br/>
              File Size: ${size} <br/>
              File type: ${type} <br/>
              File Last Modified: ${new Date(lastModified)}`;

      feedback.innerHTML = msg;
    }
  });
</script>

</html>